<template>
  <div class="main">
    <section>
      <el-form ref="searchForm" class="search-block" :model="searchCondition" label-position="right" label-width="120px">
        <el-row :gutter="50">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="用户手机号:" prop="mobile">
              <el-input @keyup.enter.native="search" v-model="searchCondition.mobile" placeholder="用户手机号" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="云仓活动:" prop="stockActivityCode">
              <el-select v-model="searchCondition.stockActivityCode" clearable>
                <el-option v-for="item in activitiesList" :key="item.seriesId" :label="item.seriesName" :value="item.seriesId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="库存变更类型:" prop="stockChangeType">
              <el-select v-model="searchCondition.stockChangeType" clearable>
                <el-option v-for="item in stockTypeList" :key="item.tradeType" :label="item.tradeTypeName" :value="item.tradeType"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="时间:" prop="seriesType">
              <el-date-picker
                v-model="searchCondition.datetimerange"
                type="datetimerange"
                range-separator="~"
                @change="dateChange"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
          <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-table class="collect-table" :data="collectList" v-loading="collectLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" width="100">
          <template slot-scope="scope">
            <span>汇总</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="云仓活动名称" prop="stockActivityName" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="申购入库">
          <template slot-scope="scope">
            <span v-if="scope.row.applyTotal">{{scope.row.applyTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申购出库">
          <template slot-scope="scope">
            <span v-if="scope.row.allocateTotal">{{scope.row.allocateTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="提货出库">
          <template slot-scope="scope">
            <span v-if="scope.row.pickUpTotal">{{scope.row.pickUpTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="云仓下拨入库">
          <template slot-scope="scope">
            <span v-if="scope.row.stockAllocatePutTotal">{{scope.row.stockAllocatePutTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="云仓下拨出库">
          <template slot-scope="scope">
            <span v-if="scope.row.stockAllocatePullTotal">{{scope.row.stockAllocatePullTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="云仓转换入库">
          <template slot-scope="scope">
            <span v-if="scope.row.stockChangePutTotal">{{scope.row.stockChangePutTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="云仓转换出库">
          <template slot-scope="scope">
            <span v-if="scope.row.stockChangePullTotal">{{scope.row.stockChangePullTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="其他原因入库">
          <template slot-scope="scope">
            <span v-if="scope.row.otherReasonPutTotal">{{scope.row.otherReasonPutTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="其他原因出库">
          <template slot-scope="scope">
            <span v-if="scope.row.otherReasonPullTotal">{{scope.row.otherReasonPullTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退单返还">
          <template slot-scope="scope">
            <span v-if="scope.row.refundTotal">{{scope.row.refundTotal}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="序号" type="index" width="50" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="用户手机号" prop="mobile" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickname" width="100"></el-table-column>
        <el-table-column align="center" label="云仓活动名称" prop="seriesName"></el-table-column>
        <el-table-column align="center" label="库存变更类型" prop="tradeTypeName"></el-table-column>
        <el-table-column align="center" label="变更数量" prop="tradeNumber">newStockNumber - oldStockNumber
          <template slot-scope="scope">
            <span v-if="scope.row.newStockNumber - scope.row.oldStockNumber < 0">-{{scope.row.oldStockNumber - scope.row.newStockNumber}}</span>
            <span v-else-if="scope.row.newStockNumber - scope.row.oldStockNumber > 0">+{{scope.row.newStockNumber - scope.row.oldStockNumber}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="变更时间" prop="updatedAt"></el-table-column>
        <el-table-column align="center" label="变更前库存数量" prop="oldStockNumber"></el-table-column>
        <el-table-column align="center" label="变更后库存数量" prop="newStockNumber"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'orderQuery',
    data() {
      return {
        collectList: [],
        listLoading: false,
        collectLoading: false,
        listQuery: {},
        searchCondition: {
          mobile: '',
          stockActivityCode: '',
          stockChangeType: '',
          datetimerange: [],
          changeEndTime: '',
          changeStartTime: ''
        },
        pageIndex: 1,
        pageSize: 10,
        list: [],
        listTotal: 0,
        canSearch: true,
        activitiesList: [],
        stockTypeList: []
      }
    },
    created() {
      this.getActivities()
      this.getStockType()
    },
    methods: {
      // 清空搜索条件
      resetForm (formName) {
        this.$nextTick(() => {
          this.searchCondition.datetimerange = ['', '']
          this.$refs[formName].resetFields()
        })
      },
      // 获取列表
      getList() {
        let tFlag = this.listQuery.datetimerange && this.listQuery.datetimerange.length
        this.listQuery.changeStartTime = tFlag ? new Date(this.listQuery.datetimerange[0]).getTime():''
        this.listQuery.changeEndTime = tFlag ? new Date(this.listQuery.datetimerange[1]).getTime():''
        this.listLoading = true
        this.request({
          url: '/bsnl-product/box/stock/detail-report/list',
          method: 'post',
          data: { 
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            ...this.listQuery
          }
        }).then(({data, totalCount}) => {
          this.list = data.boxDetailReportVOList
          this.collectList = data.boxDetailReportTotalList
          this.listTotal = totalCount
          this.listLoading = false
        }).catch(err => {
          this.list = []
          this.collectList = []
          this.listTotal = 0
          this.listLoading = false
        })
      },
      // 获取云仓活动下拉列表
      getActivities () {
        this.request({
          url: '/bsnl-product/box/list/historyCloudStock',
          method: 'get',
        }).then((res) => {
          if (res.status === 200) {
            let temp = [{seriesName:'全部', seriesId:''}]
            const resdata = res.data || []
            const list = temp.concat(resdata)
            this.activitiesList = list
          }
        }).catch(err => {
         this.activitiesList = []
        })
      },
      // 获取库存变更类型下拉列表
      getStockType () {
        this.request({
          url: '/bsnl-product/box/stock/detail-report/tradeType',
          method: 'get',
        }).then((res) => {
          if (res.status === 200) {
            let temp = [{tradeTypeName:'全部', tradeType:''}]
            const resdata = res.data || []
            const list = temp.concat(resdata)
            this.stockTypeList = list
          }
        }).catch(err => {
         this.stockTypeList = []
        })
      },
      search () {
        if(this.canSearch){
          this.canSearch = false
          setTimeout(() => {
            this.canSearch = true
          }, 1000)
          this.pageIndex = 1
          this.listQuery = { ...this.searchCondition }
          this.getList()
        }
      },
      handleSizeChange (value) {
        this.pageSize = value
        this.getList()
      },
      handleCurrentChange(val){
        this.pageIndex = val
        this.getList()
      },
      // 时间选择器改变事件
      dateChange(val) {
        if(val && val.length){
          const start = val[0].getTime()
          const end = val[1].getTime()
          const result = end - start
          if(result > (1000 * 60 * 60 * 24 * 365)){
            this.searchCondition.datetimerange = ['', '']
            this.$message.error('最长支持一年跨度的数据查询')
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
.collect-table {
  margin-bottom: 30px;
}
</style>